<!--  -->
<template>
  <el-row>
  <el-col :span="12" class="itembox">
    <div id='goodItem'>
      <img :src="imgURL + (Math.random() * 100).toFixed(0)" alt="" />
      <p>商品名称</p>
      <p>￥199</p>
    </div>
  </el-col>
  <el-col :span="12" class="itembox">
    <div id='goodItem'>
      <img :src="imgURL + (Math.random() * 100).toFixed(0)" alt="" />
      <p>商品名称</p>
      <p>￥199</p>
    </div>
  </el-col>
</el-row>
</template>

<script>
  export default {
  data() {
    return {
      // imgURL:'http://picsum.photos/'+document.body.clientWidth/2
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  methods:{
    Hrandom(){
      return (Math.random() * 100).toFixed(0)
    }
  },
  computed:{
    imgURL(){
      return 'http://picsum.photos/' + (document.body.clientWidth *0.9 * 0.5).toFixed(0) + '?random='
    }
  },
  created() {
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
  }
  }
</script>
<style scoped>
/* @import url(); 引入css类 */
  .itembox{
    display: inline-block;
    margin: 0 auto;
  }
  #goodItem{
    text-align: center;
    margin-bottom: 20px;
  }
</style>